<template>
    <div class="gray-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>系统管理</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>灰度流量</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="btn-box">
            <el-button type="primary">添加灰度策略</el-button>
            <el-button type="warning">灰度策略说明</el-button>
            <el-input v-model="searchStrategy" placeholder="请输入策略值回车检索" clearable style="width:60%;margin-left: 10px;" />
        </div>
        <div class="gray-item">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%;margin-top: 10px;"
                height="100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="100" />
                <el-table-column property="grayStrategy" label="灰度策略" width="300" />
                <el-table-column property="strategyVal" label="策略值" width="200" />
                <el-table-column property="strategyState" label="策略状态" width="200">
                    <template #default="scope">
                        <div style="display: flex; align-items: center;cursor: pointer;">
                            <span v-if="scope.row.strategyState === 0 ">启用</span>
                            <span v-else style="color:red">作废</span>
                            <el-icon v-if="scope.row.strategyState === 0 " color="green" size="18" style="margin-left:12px"><CircleCheck /></el-icon>
                            <el-icon v-else style="margin-left:12px" color="red" size="18"><CircleClose /></el-icon>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="strategyTime" label="发布时间" width="300" show-overflow-tooltip />
                <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <el-button type="success" size="small" @click="strategyDetail(scope.$index,scope.row)">详情</el-button>
                        <el-button type="primary" size="small">修改</el-button>
                        <el-button type="danger" size="small" v-if="scope.row.strategyState === 0 ">作废</el-button>
                        <el-button type="success" size="small" v-if="scope.row.strategyState === 1 ">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>      
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const searchStrategy = ref()
const multipleTableRef=ref()
const multipleSelection  = ref([])
const tableData = ref([
    {grayStrategy: "LIS", strategyVal: 100, strategyState: 0, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "PACS", strategyVal: 50, strategyState: 1, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "EMR", strategyVal: 11, strategyState: 0, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "LIS", strategyVal: 100, strategyState: 0, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "PACS", strategyVal: 50, strategyState: 1, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "EMR", strategyVal: 11, strategyState: 0, strategyTime: '2022-05-16 15:25:12'},
    {grayStrategy: "LIS", strategyVal: 100, strategyState: 0, strategyTime: '2022-05-16 15:25:12'}
])

//选择
const handleSelectionChange = (val)=>{
    console.log('select===>',val);
    multipleSelection.value = val
}

//详情
const strategyDetail = (index,item)=>{
    ElMessage.success(item.grayStrategy)
}

</script>

<style lang="less" scoped>
.gray-box{
    width: 100%;
    height: 100%;
    .btn-box{
        margin-top: 20px;
    }
    .gray-item{
        width: 100%;
        height: 90%;
    }
}
</style>